<template>
  <vxe-modal
    :title="$t('common.action.add', '新增')"
    v-model="show"
    :loading="loading"
    :mask="false"
    :lock-view="false"
    width="1024px"
    height="750px"
    destroy-on-close
    show-zoom
    remember
    resize
    show-footer
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      :label-width="labelWidth"
    >
      <el-tabs v-model="activeTab">
        <el-tab-pane label="general" :name="0">
          <el-row>
            <el-col :span="span">
              <el-form-item-plus
                :label="$t('menu.admin.dict.field.name', '名称')"
                prop="name"
              >
                <el-input
                  v-model="formData.name"
                  :placeholder="$p('menu.admin.dict.field.name', '名称')"
                />
              </el-form-item-plus>
            </el-col>

            <el-col :span="span">
              <el-form-item-plus
                :label="$t('menu.admin.dict.field.code', '代码')"
                prop="code"
              >
                <el-input
                  v-model="formData.code"
                  :placeholder="$p('menu.admin.dict.field.code', '代码')"
                />
              </el-form-item-plus>
            </el-col>

            <el-col :span="span">
              <el-form-item-plus
                :label="$t('menu.admin.dict.field.level', '级别')"
                prop="level"
              >
                <el-radio-group v-model="formData.level">
                  <el-radio
                    v-for="item in options['level']"
                    :value="item.value"
                    :label="item.label"
                  >
                    {{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item-plus>
            </el-col>

            <el-col :span="span">
              <el-form-item-plus
                :label="$t('menu.admin.dict.field.type', '类型')"
                prop="type"
              >
                <el-radio-group v-model="formData.type">
                  <el-radio
                    v-for="item in options['type']"
                    :value="item.value"
                    :label="item.label"
                  >
                    {{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item-plus>
            </el-col>

            <el-col
              :span="span"
              v-if="formData.type == 2 || formData.type == 3"
            >
              <el-form-item-plus
                :label="$t('menu.admin.dict.field.sql', '设置')"
                prop="sql"
              >
                <el-input
                  v-model="formData.sql"
                  type="textarea"
                  :row="6"
                  :placeholder="$p('menu.admin.dict.field.sql', '设置')"
                />
              </el-form-item-plus>
            </el-col>

            <el-col :span="span" v-if="formData.type == 1">
              <el-form-item-plus
                :label="$t('menu.admin.dict.field.sql', '设置')"
                prop="sql"
              >
                <ra-array-editor v-model="formData.sql" :isTree="false" />
              </el-form-item-plus>
            </el-col>

            <el-col :span="span">
              <el-form-item-plus
                :label="$t('common.field.remark', '备注')"
                prop="remark"
              >
                <el-input
                  v-model="formData.remark"
                  type="textarea"
                  :row="6"
                  :placeholder="$p('common.field.remark', '备注')"
                />
              </el-form-item-plus>
            </el-col>

            <el-col :span="span">
              <el-form-item-plus
                :label="$t('common.field.sort', '排序')"
                prop="sort"
              >
                <el-input-number
                  v-model="formData.sort"
                  :placeholder="$p('common.field.sort', '排序')"
                />
              </el-form-item-plus>
            </el-col>

            <el-col :span="span">
              <el-form-item-plus
                :label="$t('common.field.status', '状态')"
                prop="status"
              >
                <ra-dict-switch
                  v-model="formData.status"
                  code="switch_options"
                />
              </el-form-item-plus>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>

      <!-- 结束 -->
    </el-form>

    <template #footer>
      <el-button type="warning" @click="handleCancel">
        {{ $t('common.action.cancel', '取消') }}
      </el-button>
      <el-button type="info" @click="handleReset">
        {{ $t('common.action.reset', '重置') }}
      </el-button>
      <el-button type="primary" @click="handleSubmit" :disabled="loading">
        {{ $t('common.action.confirm', '确定') }}
      </el-button>
    </template>
  </vxe-modal>
</template>
<script setup>
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';

defineOptions({
  name: 'add',
  inheritAttrs: false,
});

const props = defineProps({
  api: {
    type: Object,
    required: true,
    validator: (value) => {
      return typeof value.add === 'function';
    },
  },
  options: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(['reload']);

// 响应式数据
const loading = ref(false);
const show = ref(false);
const activeTab = ref(0);
const labelWidth = ref('120px');
const span = 24;
const formRef = ref();

// 表单数据
const defaultFormData = {
  name: null,
  code: null,
  level: 2,
  type: 1,
  sql: null,
  sql: [],
  remark: null,
  sort: null,
  status: null,
};
const formData = reactive({ ...defaultFormData });

// 表单验证规则
const formRules = reactive({});

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields();
  Object.assign(formData, defaultFormData);
};

// 表单验证
const validateForm = async () => {
  return await formRef.value?.validate();
};

// 提交处理
const handleSubmit = async () => {
  try {
    await validateForm();
    loading.value = true;
    !formData.status ? delete formData.status : null;
    await props.api.add({ ...toRaw(formData) });
    resetForm();
    show.value = false;
    emit('reload');
  } catch (error) {
    console.error('Error in add operation:', error);
  } finally {
    loading.value = false;
  }
};

// 取消处理
const handleCancel = () => {
  show.value = false;
};

// 重置处理
const handleReset = () => {
  resetForm();
};

// 显示模态框
const showModal = () => {
  resetForm();
  show.value = true;
};

defineExpose({
  show: showModal,
});
</script>
<style lang="scss" scoped>
:deep(.el-tabs__header) {
  display: none;
}
:deep(.el-tabs__content) {
  padding: 0 !important;
}
</style>
